<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Edit Order</title>
    <%@ include file="./includes/bulma.jsp" %>
  </head>
  <body>
    <%@ include file="./includes/navbar.jsp" %>
	<section class="section">
      <div class="columns">
        <div class="column is-4-tablet is-3-desktop is-2-widescreen">
            <%@ include file="./includes/sidebar.jsp" %>      
        </div>
        <div class="column">
          <nav class="breadcrumb">
            <ul>
              <li><a href="orders.jsp">Orders</a></li>
              <li class="is-active"><a>Edit Order</a></li>
            </ul>
          </nav>

          <h1 class="subtitle is-3">
            <span class="has-text-gray-light">Order</span>
            <strong>787352</strong>
          </h1>

          <div class="columns is-desktop">
            <div class="column is-4-desktop is-3-widescreen">
              <p class="heading">
                <strong>Date</strong>
              </p>
              <p class="content">
                Nov 18, 17:38
              </p>

              <p class="heading">
                <strong>Status</strong>
              </p>
              <div class="buttons">
                <button class="button is-small is-warning">In progress</button>
                <button class="button is-small is-success is-outlined">Successful</button>
                <button class="button is-small is-danger is-outlined">Failed</button>
              </div>

              <p class="heading">
                <strong>Customer</strong>
              </p>
              <p class="content">
                <strong>
                  <a href="edit-customer.html">John Miller</a>
                </strong>
                <br>
                <code>johnmiller@gmail.com</code>
                <br>
                55 Long Bridge road
                <br>
                78170 Los Angeles
                <br>
                United States
              </p>
            </div>

            <div class="column">
              <p class="heading">
                <strong>Books</strong>
              </p>
              <table class="table is-bordered is-fullwidth">
                <thead>
                  <tr>
                    <th class="is-narrow">Cover</th>
                    <th>Title</th>
                    <th class="has-text-right is-narrow">Price</th>
                    <th class="has-text-right is-narrow">Amount</th>
                    <th class="has-text-right is-narrow">Total</th>
                  </tr>
                </thead>
                <tfoot>
                  <tr>
                    <th colspan="5" class="has-text-right">$42.98</th>
                  </tr>
                </tfoot>
                <tbody>
                  <tr>
                    <td>
                      <img src="images/tensorflow.jpg" width="40">
                    </td>
                    <td>
                      <a href="edit-book.html">
                        <strong>
                          TensorFlow For Machine Intelligence
                        </strong>
                      </a>
                    </td>
                    <td class="has-text-right">
                      $22.99
                    </td>
                    <td class="has-text-right">
                      <input class="input is-small" type="number"
                          value="1" maxlength="2" max="2">
                    </td>
                    <td class="has-text-right">
                      $22.99
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <img src="images/js-framework.jpg" width="40">
                    </td>
                    <td>
                      <a href="edit-book.html">
                        <strong>
                          Choosing a JavaScript Framework
                        </strong>
                      </a>
                    </td>
                    <td class="has-text-right">
                      $19.99
                    </td>
                    <td class="has-text-right">
                      <input class="input is-small" type="number"
                          value="1" maxlength="2" max="2">
                    </td>
                    <td class="has-text-right">
                      $19.99
                    </td>
                  </tr>
                  <tr>
                    <td colspan="5">
                      <div class="field is-grouped is-grouped-right">
                        <div class="control">
                        <div class="select is-small">
                          <select>
                            <option>TensorFlow For Machine Intelligence</option>
                            <option>Docker in Production</option>
                            <option>Developing a Gulp.js Edge</option>
                            <option>Learning Swift</option>
                            <option>Choosing a JavaScript Framework</option>
                            <option>Deconstructing Google Cardboard Apps</option>
                          </select>
                        </div>
                        </div>
                        <div class="control">
                        <input class="input is-small" type="number" 
                            value="1" placeholder="Amount" maxlength="2" max="2">
                        </div>
                        <div class="control">
                        <a class="button is-small is-link">Add book</a>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>

            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>
